今天要來介紹CSS彈性盒（Flexbox），它也是網頁佈局的好幫手，創建靈活、自適應且可讀的佈局，無論屏幕大小如何都能保持一致的外觀。

為何需要Flexbox？

主要應用在不同螢幕尺寸下的維護情形，解決傳統的網頁設計上，大量複雜的CSS程式碼的佈局維護，節省維護成本。
優勢包括：

• 自動調整佈局： 可以根據可用空間自動調整子元素的大小和位置。
• 簡化對齊和分佈： 可以輕鬆對齊和分佈元素，而不需要複雜的定位。
• 垂直和水平居中： 實現元素的垂直和水平居中變得非常容易。
• 處理不同尺寸的螢幕： 可以適應在不同尺寸的螢幕顯示內容。

Flexbox的基本概念

• 容器（Container）：
  包含Flexbox佈局的父元素。可以想像成一個盒子，其中包含了一個或多個子元素。

• 子元素（Items）：
  位於Flexbox容器內部的元素，受到Flexbox佈局的影響並且可以按照一定的規則排列。

• 主軸和交叉軸：
  Flexbox佈局有兩個方向，一個是主軸（Main Axis），另一個是交叉軸（Cross Axis）。

  • 主軸是Flex容器的主要方向，子元素在這個方向上排列。
  • 交叉軸則與主軸垂直，用於調整子元素在交叉方向上的位置。

如何使用Flexbox

將元素包裝在一個Flex容器內。容器的display屬性應設置為flex。
接下來使用以下屬性來控制子元素的排列和對齊：

• flex-direction：
  指定主軸的方向，可以是水平（row） 或垂直（column）。
• justify-content：
  控制子元素在主軸上的對齊方式，如居中、左對齊、右對齊等。
• align-items：
  控制子元素在交叉軸上的對齊方式，如居中、上對齊、下對齊等。
• flex-wrap：
  指定子元素是否可以折行，以應對螢幕尺寸較小的情況。
• flex-grow 和 flex-shrink：
  控制子元素在可用空間內的伸縮性來適應不同情況。

範例：

.container {
    /* 將容器設置Flex容器 */
  display: flex;
    /* 主軸方向為水平 */
  flex-direction: row; 
    /* 子元素居中對齊 */
  justify-content: space-between; 
    /* 子元素在交叉軸上居中對齊 */
  align-items: center; 
}

/* 子元素 */
.item {
    /* 子元素可以伸展 */
  flex-grow: 1; 
}

今天先介紹到這，感謝觀看!